<link rel="import" href="../html/polymer.html">

<link rel="import" href="shared_vars_css.html">

<!--
  Styles dedicated to a single, actionable row where clicking anywhere on the
  entire row will activate the row.
-->
<dom-module id="cr-actionable-row-style">
  <template>
    <style>
      :host {
        align-items: center;
        align-self: stretch;
        display: flex;
        margin: 0;
        outline: none;
      }

      /* [effectively-disabled_] is a private attribute to allow custom elements
       * to toggle the attribute based on state, such as whether or not the
       * internal control element is disabled, without affecting any public
       * attributes or properties. */
      :host(:not([effectively-disabled_])) {
        cursor: pointer;
      }

      :host(:not([no-hover], [effectively-disabled_]):hover) {
        background-color: var(--cr-hover-background-color);
      }

      :host(:not([no-hover], [effectively-disabled_]):active) {
        background-color: var(--cr-active-background-color);
      }

      /* Do not show hover or active states for cr-icon-buttons that are
       * embedded within the row to avoid showing multiple layers of
       * backgrounds. */
      :host(:not([no-hover], [effectively-disabled_])) cr-icon-button {
        --cr-icon-button-hover-background-color: transparent;
        --cr-icon-button-active-background-color: transparent;
      }
    </style>
  </template>
</dom-module>